<template>
	<view>
		<skeleton :skeleton="{name:'studyDetails'}" :showSkeleton="showSkeleton">
			<block slot="content">
				<noData :showErrorTip="noData">
					<block slot="content">
						<scroll-view class="swiperContainer" v-if="(type == 0 && liIndex == 0) || (type == 1 && liIndex == 0)||(type == 2&& liIndex == 0)"
						 scroll-y @scrolltolower="loadDown"
						 @scrolltoupper="loadUp">
							<!-- (0:视频课程 1:学习咨询 2:知识精讲 3:法律法规,4 热搜) -->
							<video-content :list="metaData" v-if="type == 0">
							</video-content>

							<text-content :list="metaData" v-if="type == 1"></text-content>

							<elaboration-content :list="metaData" v-if="type == 2"></elaboration-content>

							<view class="loading" v-if="noMore">没有更多了</view>
						</scroll-view>

						<scroll-view class="swiperContainer" v-if="(type == 0 && liIndex != 0) || (type == 1 && liIndex != 0)||(type == 2&& liIndex != 0)"
						 scroll-y>
							<level-video-content :levelId="levelId" :liIndex="liIndex" :type="type" :list="levelTwoList" @toggleShow = "toggleShow" v-if="type == 0">
							</level-video-content>

							<level-text-content :levelId="levelId" :liIndex="liIndex" :type="type" :list="levelTwoList" @toggleShow = "toggleShow" v-if="type == 1"></level-text-content>

							<level-elaboration-content :levelId="levelId" :liIndex="liIndex" :type="type" :list="levelTwoList" @toggleShow = "toggleShow" v-if="type == 2"></level-elaboration-content>

							<view class="loading" v-if="noMore">没有更多了</view>
						</scroll-view>

						<scroll-view class="swiperContainer" v-if="type == 3||type == 4" scroll-y @scrolltolower="loadDown"
						 @scrolltoupper="loadUp">
							<statute-content :list="metaData" v-if="type == 3"></statute-content>
							<learn-content :list="metaData" v-if="type == 4"></learn-content>

							<view class="loading" v-if="noMore">没有更多了</view>
						</scroll-view>

					</block>
				</noData>
			</block>
		</skeleton>



	</view>
</template>

<script>
	import baseService from '@/services/study/index.js';
	import videoContent from "../assembly/vvideo/videoContent";
	import textContent from "../assembly/vtext/textContent";
	import statuteContent from "../assembly/vstatute/statuteContent";
	import elaborationContent from "../assembly/velaboration/elaborationContent";
	import learnContent from "../assembly/vlearn/learnContent";

	import levelTextContent from "../level2/vtext/textContent";
	import levelVideoContent from "../level2/vvideo/videoContent";
	import levelElaborationContent from "../level2/velaboration/elaborationContent";

	const service = new baseService();
	export default {
		components: {
			videoContent,
			textContent,
			statuteContent,
			elaborationContent,
			learnContent,
			levelTextContent,
			levelVideoContent,
			levelElaborationContent
		},
		name: 'index',
		props: {
			currentCode: {
				type: String
			},
			code: {
				type: String
			},
			type: {
				type: String
			},
			activeIndex: {
				type: Number
			},
			homeCode: {
				type: String
			},
			classId: {
				type: String
			},
			levelId: {
				type: String
			},
			liIndex: {
				type: Number,
				default:0
			}
		},
		data() {
			return {
				noMore: false,
				page: 1,
				metaData: [],
				showSkeleton: true,
				tabIndex: 0,
				noData: false,
				levelTwoList: [],
				liIndex_:0
			};
		},
		watch: {
			currentCode: function(newVal) {
				if (newVal != this.code) {
					return;
				}
				this.loadData(1, newVal);
				
			},
			liIndex:function(newValue,oldVal) {
				if(this.liIndex != 0){
					this.loadQuery()
				}
			}
		},
		mounted() {
			if ((this.code == this.homeCode && this.type == 3) || (this.code == this.homeCode && this.type == 4)) {
				this.loadData(1);
			} else if ((this.type == 0 && this.liIndex == 0) || (this.type == 1 && this.liIndex == 0) || (this.type == 2 && this.liIndex == 0)) {
				this.loadData(1)
			}
		},
		computed: {
			pageSize: function() {
				// if (this.type == 3) {
				// 	return "10";
				// } 
					return "20";
				
			}
		},
		methods: {
			toggleShow(index){
				this.levelTwoList[index].showContent = Math.abs(this.levelTwoList[index].showContent - 1)
			},
			// 3  4
			loadData(page, newCode) {
				if (newCode != undefined && this.code != newCode) return;
				// studyClass,studyType,pageNo,pageSize
				service.studyVideoList(null, this.type, page, this.pageSize,this.classId).then(res => {
					if (page > 1) {
						this.metaData = [...this.metaData, ...res.result.list];
						this.noMore = res.result.list.length < this.pageSize;
					} else {
						this.noMore = false;
						this.metaData = res.result.list;
						this.noData = res.result.list.length == 0;
					}
					this.page = page;
				}).then(() => {
					this.showSkeleton = false; //页面请求完成，取消骨架屏展示
				});
			},
			// 二级知识点
			loadQuery() {
				//ascription,queryType,studyType,level1
				service.queryStudyCat(this.currentCode, 2, this.type, this.levelId).then(res => {
					this.levelTwoList = res.result
					// this.levelTwoList[0].showContent = 1
				}).then(() => {
					this.showSkeleton = false; //页面请求完成，取消骨架屏展示
				});
			},

			loadDown() {
				if (this.noMore) {
					return;
				}
				this.loadData(this.page + 1);
			},
			loadUp() {
				if (this.type == 3 || this.type == 4) {
					this.loadData(1);
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	// 列表
	.list {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}

	.loading {
		text-align: center;
		font-size: 28upx;
		padding: 20upx 0;
		color: #999;
	}
</style>
